import './dlg-header.css';

import {GotoDialog} from '../dlg-goto/dlg-goto.js';
import {AboutDialog} from '../dlg-about/dlg-about.js';
import {ReplaceDialog} from '../dlg-replace/dlg-replace.js';
import {FontDialog} from '../dlg-font/dlg-font.js';

export class HeaderDialog extends HTMLElement{
  constructor(){
    super();
      this.#init(); 
      this.#$file.onmouseover = this.#judgSelect.bind(this,"fileFlag");
      this.#$file.onmouseonclick = this.#judgSelect.bind(this,"fileFlag");
      this.#$fileList.onmouseout = this.#judgSelect.bind(this,"notfocus");
      this.#$fileList.onmouseover = this.#judgSelect.bind(this,"fileFlag");

      this.#$edit.onmouseover = this.#judgSelect.bind(this,"editFlag");
      this.#$edit.onmouseonclick = this.#judgSelect.bind(this,"editFlag");
      this.#$editList.onmouseout = this.#judgSelect.bind(this,"notfocus");
      this.#$editList.onmouseover = this.#judgSelect.bind(this,"editFlag");
      this.#$gotoDlg.onclick = this.#clickGotoDlg.bind(this);
      this.#$replace.onclick = this.#clickReplace.bind(this);

      this.#$format.onmouseover = this.#judgSelect.bind(this,"formatFlag");
      this.#$format.onmouseonclick = this.#judgSelect.bind(this,"formatFlag");
      this.#$formatList.onmouseout = this.#judgSelect.bind(this,"notfocus");
      this.#$formatList.onmouseover = this.#judgSelect.bind(this,"formatFlag");
      this.#$fontText.onclick = this.#clickFontText.bind(this);

      this.#$checkout.onmouseover = this.#judgSelect.bind(this,"checkoutFlag");
      this.#$checkout.onmouseonclick = this.#judgSelect.bind(this,"checkoutFlag");
      this.#$checkoutList.onmouseout = this.#judgSelect.bind(this,"notfocus");
      this.#$checkoutList.onmouseover = this.#judgSelect.bind(this,"checkoutFlag");

      this.#$help.onmouseover = this.#judgSelect.bind(this,"helpFlag");
      this.#$help.onmouseonclick = this.#judgSelect.bind(this,"helpFlag");
      this.#$helpList.onmouseout = this.#judgSelect.bind(this,"notfocus");
      this.#$helpList.onmouseover = this.#judgSelect.bind(this,"helpFlag");
      this.#$aboutDlg.onclick = this.#clickAboutDlg.bind(this);
  }
  #init(){
    this.innerHTML = this.#html;
    this.$ = this.querySelector;
    this.#$body = document.body
    this.#$file = this.$('.file');
    this.#$fileList = this.$('.fileList');

    this.#$edit = this.$('.edit');
    this.#$editList = this.$('.editList');
    this.#$gotoDlg = this.$('.gotoDlg');
    this.#$replace = this.$('.replace');

    this.#$format = this.$('.format');
    this.#$formatList = this.$('.formatList');
    this.#$fontText = this.$('.fontText');

    this.#$checkout = this.$('.checkout');
    this.#$checkoutList = this.$('.checkoutList');

    this.#$help = this.$('.help');
    this.#$helpList = this.$('.helpList');

    this.#$aboutDlg = this.$('.aboutDlg');

     customElements.define("goto-dialog", GotoDialog);
     customElements.define("replace-dialog", ReplaceDialog);
     customElements.define("about-dialog", AboutDialog);
     customElements.define("font-dialog", FontDialog);
  }
#judgSelect(flag){
  if(flag == "fileFlag"){
      this.#$fileList.setAttribute("style","display:flex;flex-direction:column;");
      this.#$editList.setAttribute("style","display:none");
      this.#$formatList.setAttribute("style","display:none");
      this.#$checkoutList.setAttribute("style","display:none");
      this.#$helpList.setAttribute("style","display:none");
  }else if(flag == "editFlag"){
      this.#$fileList.setAttribute("style","display:none;");
      this.#$editList.setAttribute("style","display:flex;flex-direction:column;");
      this.#$formatList.setAttribute("style","display:none");
      this.#$checkoutList.setAttribute("style","display:none");
      this.#$helpList.setAttribute("style","display:none;");
  }else if(flag == "formatFlag"){  
      this.#$fileList.setAttribute("style","display:none;");
      this.#$editList.setAttribute("style","display:none;");
      this.#$formatList.setAttribute("style","display:flex;flex-direction:column;");
      this.#$checkoutList.setAttribute("style","display:none");
      this.#$helpList.setAttribute("style","display:none");
  }else if(flag == "checkoutFlag"){
      this.#$fileList.setAttribute("style","display:none;");
      this.#$editList.setAttribute("style","display:none;");
      this.#$formatList.setAttribute("style","display:none;");
      this.#$checkoutList.setAttribute("style","display:flex;flex-direction:column;");
      this.#$helpList.setAttribute("style","display:none;");
  }else if(flag == "helpFlag"){
      this.#$fileList.setAttribute("style","display:none;");
      this.#$editList.setAttribute("style","display:none;");
      this.#$formatList.setAttribute("style","display:none;");
      this.#$checkoutList.setAttribute("style","display:none;");
      this.#$helpList.setAttribute("style","display:flex;flex-direction:column;");
  }else if(flag == "notfocus"){
      this.#$fileList.setAttribute("style","display:none;");
      this.#$editList.setAttribute("style","display:none;");
      this.#$formatList.setAttribute("style","display:none;");
      this.#$checkoutList.setAttribute("style","display:none;");
      this.#$helpList.setAttribute("style","display:none");
  }
}
#clickGotoDlg(){
  this.#$editList.setAttribute("style","display:none;");
  this.#$body.insertAdjacentHTML('beforeend','<goto-dialog></goto-dialog>')
}

#clickReplace(){
  this.#$editList.setAttribute("style","display:none;");
  this.#$body.insertAdjacentHTML('beforeend','<replace-dialog></replace-dialog>')
}

#clickFontText(){
  this.#$formatList.setAttribute("style","display:none;");
  this.#$body.insertAdjacentHTML('beforeend','<font-dialog></font-dialog>')
}

#clickAboutDlg(){
  this.#$helpList.setAttribute("style","display:none;");
  this.#$body.insertAdjacentHTML('beforeend','<about-dialog></about-dialog>')
}



  #$body = null;
  #$file = null;
  #$fileList = null;

  #$edit = null;
  #$editList = null;
  #$gotoDlg = null;
  #$replace = null;

  #$format = null;
  #$formatList = null;
  #$fontText = null;

  #$checkout = null;
  #$checkoutList = null;

  #$help = null;
  #$helpList = null;
  #$aboutDlg = null;
  
#html = ''
  +'<div class="header">'
  +'<input type="button" class="file" value="文件(F)">'
    +'<div class="fileList">'
      +'<input type="button" class="newFile" value="新建(N)">'
      +'<input type="button" class="open" value="打开(O)">'
      +'<input type="button" class="save" value="保存(S)">'
      +'<input type="button" class="saveAs" value="另存为(A)">'
      +'<HR align=center width=160 color=#ccc SIZE=1>'
      +'<input type="button" class="pageSettings" value="页面设置(U)">'
      +'<input type="button" class="print" value="打印(P)">'
      +'<HR align=center width=160 color=#ccc SIZE=1>'
      +'<input type="button" class="exit" value="退出(X)">'
    +'</div>'
  +'<input type="button" class="edit" value="编辑(E)">'
   +'<div class="editList">'
      +'<input type="button" class="undo" value="撤销(U)">'
      +'<input type="button" class="shear" value="剪切(T)">'
      +'<input type="button" class="copy" value="复制(C)">'
      +'<input type="button" class="paste" value="粘贴(P)">'
      +'<input type="button" class="delete" value="删除(L)">'
      +'<HR align=center width=160 color=#ccc SIZE=1>'
      +'<input type="button" class="searchBing" value="使用Bing搜索(S)">'
      +'<input type="button" class="find" value="查找(F)">'
      +'<input type="button" class="findNext" value="查找下一个(N)">'
      +'<input type="button" class="replace" value="替换(R)">'
      +'<input type="button" class="gotoDlg" value="转到(G)">'
      +'<HR align=center width=160 color=#ccc SIZE=1>'
      +'<input type="button" class="all" value="全选(A)">'
      +'<input type="button" class="date" value="时间/日期(D)">'
    +'</div>'
  +'<input type="button" class="format" value="格式(O)">'
    +'<div class="formatList">'
      +'<div class="formatWrap">'
        +'<input type="checkbox" class="wrap" value="wrap"/>'
        +'<input type="button" class="wrapText" value="自动换行">'
      +'</div>'
      +'<input type="button" class="fontText" value="字体(F)" />'
    +'</div>'
  +'<input type="button" class="checkout" value="查看(V)">'
    +'<div class="checkoutList">'
      +'<input type="button" class="statusBar" value="状态栏(S)">'
    +'</div>'
  +'<input type="button" class="help" value="帮助(H)">'
    +'<div class="helpList">'
      +'<input type="button" class="checkHelp" value="查看帮助(H)">'
      +'<input type="button" class="aboutDlg" value="关于记事本(A)">'
    +'</div>'
  +'</div>'
}

